import React, {useState, useEffect} from "react";
import {trim} from "lodash";
import PropTypes from "prop-types";
import {Modal, Form, Input, Select} from "antd/lib";
import { wrap as wrapDialog, DialogPropType } from "@/components/DialogWrapper";
import DynamicComponent from "@/components/DynamicComponent";
import {policy} from "@/services/policy";
import Enums from "@/services/enums";
import TimeStruct from "@/services/timestruct";
import notification from "@/services/notification";

const { Option } = Select;

function CreateTimeStructDialog({calendar_enum, parent_id, dialog }) {
  const [title, setTitle] = useState("");
  const [timeserialnode_enum, setTimeserialnode_enum] = useState("");
  const [num, setNum] = useState(0);
  const [nodes, setNodes] = useState([]);
  const [isValid, setIsValid] = useState(false);
  const [saveInProgress, setSaveInProgress] = useState(false);
  const isCreateTimeStructEnabled = useState(true);//policy.isAdmin() || policy.isDefault();
  
  useEffect(() => {
    Enums.items('timeserialnode_enum').then(data => {
      setNodes(data);
      setTimeserialnode_enum(data[0].value)      
    });
  }, []);

  function handleTitleChange(event) {
    const value = trim(event.target.value);
    setTitle(value);
    setIsValid(value !== "");
  }

  function handleNumChange(event) {
    const value = trim(event.target.value);
    setNum(value);
  }

  function handleSelectChange(value) {
    setTimeserialnode_enum(value);
  }

  function handleSubmit() {
    setSaveInProgress(true);

    TimeStruct.create(calendar_enum, {title: title, num: num, parent_id: parent_id, timeserialnode_enum: timeserialnode_enum})
      .then(() => {
        dialog.close({ success: true});
      })
      .catch(error => {
        notification.error(error.message, error.detailedMessage);
        setSaveInProgress(false);
      });
  }

  return (
    <Modal
      {...dialog.props}
      {...(isCreateTimeStructEnabled ? {} : { footer: null })}
      title="时间结构"
      okText="保存"
      cancelText="取消"
      okButtonProps={{
        disabled: !isValid || saveInProgress,
        loading: saveInProgress,
        "data-test": "DashboardSaveButton",
      }}
      cancelButtonProps={{
        disabled: saveInProgress,
      }}
      onOk={handleSubmit}
      closable={!saveInProgress}
      maskClosable={!saveInProgress}
      wrapProps={{
        "data-test": "CreateDashboardDialog",
      }}>
      <DynamicComponent name="CreateTimeStructDialogExtra" disabled={!isCreateTimeStructEnabled}>
      <Form>
        <Form.Item style={{ marginBottom: 5 }} label="名称">
        <Input
          defaultValue={title}
          onChange={handleTitleChange}
          placeholder="名称"
          disabled={saveInProgress}
        />
        </Form.Item>
        <Form.Item style={{ marginBottom: 5 }} label="节点类型">
        <Select
          onChange={handleSelectChange}
          placeholder="节点类型"
          value={timeserialnode_enum}
          disabled={saveInProgress}
        >
          {nodes.map(option => (
            <Option key={option.value} value={option.value}>
              {option.label}
            </Option>
          ))}
        </Select>
        </Form.Item>
        <Form.Item style={{ marginBottom: 5 }} label="排序">
        <Input
          type="number"
          defaultValue={num}
          onChange={handleNumChange}
          placeholder="排序"
          disabled={saveInProgress}
        />
        </Form.Item>
      </Form>
      </DynamicComponent>
    </Modal>
  );
}

CreateTimeStructDialog.propTypes = {
  calendar_enum: PropTypes.string,
  parent_id: PropTypes.number,
  dialog: DialogPropType.isRequired,
};

export default wrapDialog(CreateTimeStructDialog);
